<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<style>
	/* 	.header{
			width:100%;
			height:35px;
			position:fixed;
			top:0
		}
		
		.footer{
			width:100%;
			height:35px;
			position:fixed;
			bottom:0;
		}
		
		.content{
			overflow-y:auto;
			height:1000px;
		}
		
		ul li {
			height:500px;
			border:1px solid #ccc;
		} */
	</style>

 </head>
 <body>
	<div class="header">
		我是顶部
	</div>
	<div class="content">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>

		</ul>
	</div>
	<div class="footer">
		我是尾部
	</div>

	<script>
		var header = document.querySelector(".header"),
			content = document.querySelector(".content"),
			footer = document.querySelector(".footer");
			lis = document.querySelectorAll("li");
		header.style.position = "fixed"
		header.style.top = "0"
		header.style.textAlign = "center"
		header.style.width = "100%"
		header.style.backgroundColor = "skyblue"
		header.style.lineHeight = "60px"
		header.style.color = "#2a82e4"

		footer.style.position = "fixed"
		footer.style.bottom = "0"
		footer.style.textAlign = "center"
		footer.style.width = "100%"
		footer.style.backgroundColor = "skyblue"
		footer.style.lineHeight = "60px"
		
		lis[0].style.width = "80%"
		lis[0].style.height = "100px"
		lis[0].style.margin = "10px"
		lis[0].style.border = "1px solid #ccc"

		lis[1].style.width = "80%"
		lis[1].style.height = "100px"
		lis[1].style.margin = "10px"
		lis[1].style.border = "1px solid #ccc"

		lis[2].style.width = "80%"
		lis[2].style.height = "100px"
		lis[2].style.margin = "10px"
		lis[2].style.border = "1px solid #ccc"

		lis[3].style.width = "80%"
		lis[3].style.height = "100px"
		lis[3].style.margin = "10px"
		lis[3].style.border = "1px solid #ccc"

		lis[4].style.width = "80%"
		lis[4].style.height = "100px"
		lis[4].style.margin = "10px"
		lis[4].style.border = "1px solid #ccc"

		lis[5].style.width = "80%"
		lis[5].style.height = "100px"
		lis[5].style.margin = "10px"
		lis[5].style.border = "1px solid #ccc"

		lis[6].style.width = "80%"
		lis[6].style.height = "100px"
		lis[6].style.margin = "10px"
		lis[6].style.border = "1px solid #ccc"

		lis[7].style.width = "80%"
		lis[7].style.height = "100px"
		lis[7].style.margin = "10px"
		lis[7].style.border = "1px solid #ccc"

	

	</script>
 </body>
</html>
